<template>
	<view class="container">
		<view class="orderinfo">
			<view class="info">
				<image :src="$img_path('/course/uni.png')" mode="widthFix"></image>
				<view class="text">
					<view class="name more-row" :style="{'--row-num':2}">
						课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称
					</view>
					<view class="price">
						<view class="num">
							<text>¥ </text>199
						</view>
						<text>￥699</text>
					</view>
				</view>
			</view>
		</view>
		<view class="orderinfo box-1 box-4">
			<view class="form-item">
				<text>帮他人报名</text>
				<view class="r-text">
					<switch color="#00E166" :checked="switchCheck" @change="switchChang"/>
				</view>
			</view>
		</view>
		
		<view class="orderinfo box-2 box-4" v-if="switchCheck">
			<view class="user-item">
				<image :src="$img_path('/course/img/5.png')" mode="widthFix"></image>
				<view class="u-info">
					<view class="name">
						张三
					</view>
					<view class="number">
						123456789101
					</view>
				</view>
			</view>
			<view class="add" @click="addUser">
				<image :src="$img_path('/course/img/6.png')" mode="widthFix"></image>
				<text>添加信息</text>
			</view>
		</view>
		
		<view class="orderinfo box-1 box-4" v-if="!switchCheck">
			<view class="form-item">
				<text>购买数量</text>
				<view class="r-text num">
					<image :src="$img_path('/course/img/4.png')" mode="widthFix"></image>
					<input type="text" v-model="form.num" />
					<image :src="$img_path('/course/img/3.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="form-item">
				<text>姓名</text>
				<view class="r-text">
					<input type="text" placeholder="请输入" placeholder-class="input-tip"/>
				</view>
			</view>
			<view class="form-item">
				<text>手机号</text>
				<view class="r-text">
					<input type="text" placeholder="请输入" placeholder-class="input-tip"/>
				</view>
			</view>
			<view class="form-item">
				<text>字段名称</text>
				<view class="r-text">
					<input type="text" placeholder="请输入" placeholder-class="input-tip"/>
				</view>
			</view>
		</view>
		
		
		<view class="orderinfo box-4">
			<view class="form-item">
				<text>总费用</text>
				<view class="r-text">
					<text>¥ 199.00</text>
				</view>
			</view>
			<view class="form-item" @click="showPopup">
				<text>优惠券</text>
				<view class="r-text">
					<text>-¥ 20.00</text>
					<image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="form-item">
				<text>备注</text>
				<view class="r-text">
					<text>无备注</text>
					<image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<view class="bottom-btn">
			<view class="btn-box">
				<view class="left">
					<text>￥</text>
					<view class="num">
						80<text>.00</text>
					</view>
				</view>
				<view class="btn">
					<!-- <button>加入购物车</button> -->
					<button v-if="!switchCheck" @click="submitOrder">提交订单</button>
					<button v-if="switchCheck" @click="sendUrl">发送付款链接</button>
				</view>
			</view>
		</view>
		
		
		<!-- 优惠券 -->
		<popupBox ref="coupon" type="bottom" :isSlot="true">
			<view class="coupon-popup">
				<view class="title">
					<text>优惠券</text>
					<image :src="$img_path('/course/close_popup.png')" @click="$refs.coupon.close()" mode="widthFix"></image>
				</view>
				<view class="tab">
					<view class="item" :class="tab_index==1?'select':''" @click="tabCheck(1)">
						<text>可使用优惠券(2)</text>
					</view>
					<view class="item" :class="tab_index==2?'select':''" @click="tabCheck(2)">
						<text>不可使用优惠券(2)</text>
					</view>
				</view>
				<view class="coupon-box">
					<view class="item" v-for="(item,i) in 2" :key="i">
						<image class="bg" :src="$img_path('/course/coupon.png')" mode="scaleToFill"></image>
						<view class="c_num">
							<view class="price">
								<text>￥</text>5
							</view>
							<text>满25可用</text>
						</view>
						<view class="c_info">
							<text class="xz">优惠券名称</text>
							<view class="c_box">
								有效期至2023-08-15 14：00
							</view>
							<view class="time">
								仅限线上课程使用 <image :src="$img_path('/course/coupon_3.png')" mode="widthFix"></image>
							</view>
						</view>
						<image class="checkImg" v-if="false" :src="$img_path('/course/coupon_2.png')" mode="widthFix"></image>
						<image class="checkImg" v-else :src="$img_path('/course/coupon_1.png')" mode="widthFix"></image>
						
						<view class="not_use" v-if="tab_index==2">
							<button>不可使用</button>
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="b-box">
						<button v-if="tab_index==1">确认</button>
					</view>
				</view>
			</view>
		</popupBox>
		<popupBox ref="pay" type="bottom" :isSlot="true">
			<view class="pay-box">
				<view class="top">
					<image :src="$img_path('/course/close_popup.png')" @click="$refs.pay.close()" mode="widthFix"></image>
				</view>
				<view class="price">
					<view class="num">
						<text>￥</text>80.00
					</view>
				</view>
				<view class="pay-type">
					<view class="item">
						<view class="left">
							<image :src="$img_path('/course/pay_1.png')" mode="widthFix"></image>
							<view class="name">
								<text>微信支付</text>
							</view>
						</view>
						<view class="right">
							<image v-if="false" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
					<view class="item">
						<view class="left">
							<image :src="$img_path('/course/pay_2.png')" mode="widthFix"></image>
							<view class="name">
								<text>第三方支付</text>
							</view>
						</view>
						<view class="right">
							<image v-if="false" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
					<view class="item">
						<view class="left">
							<image :src="$img_path('/course/pay_3.png')" mode="widthFix"></image>
							<view class="name">
								<text>余额</text>
								<text>余额：¥ 500.00</text>
							</view>
						</view>
						<view class="right">
							<image v-if="false" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				
				<view class="btn">
					<view class="b-box">
						<button @click="payOrder">确认支付</button>
					</view>
				</view>
			</view>
		</popupBox>
	
		<popupBox ref="copyUrl" type="bottom" :isSlot="true">
			<view class="copy-box">
				<view class="title">
					<image class="t-icon" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
					<text>优惠券</text>
					<image class="close" :src="$img_path('/course/close_popup.png')" @click="$refs.copyUrl.close()" mode="widthFix"></image>
				</view>
				<view class="con">
					<view class="url-box one-row">
						这是一个链接
					</view>
				</view>
				<view class="btn">
					<view class="b-box">
						<button @click="towx">
							<image :src="$img_path('/course/img/9.png')" mode="widthFix"></image>
							<text>去微信粘贴给好友</text>
						</button>
					</view>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import popupBox from '@/components/popup/popup'
	export default {
		components: {
			popupBox
		},
		data() {
			return {
				tab_index:1,
				switchCheck:false,
				form:{
					num:1
				}
			};
		},
		methods:{
			showPopup(){
				this.$refs.coupon.open()
			},
			
			tabCheck(i){
				this.tab_index = i
			},
			
			switchChang(val){
				this.switchCheck = val.detail.value
			},
			
			addUser(){
				uni.navigateTo({
					url:'/pagesCourse/order/select_user'
				})
			},
			
			submitOrder(){
				this.$refs.pay.open()
			},
			sendUrl(){
				this.$refs.copyUrl.open()
			},
			towx(){
				uni.exitMiniProgram()
			},
			
			payOrder(){
				uni.navigateTo({
					url:'/pagesCourse/order/pay_success'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
.container{
	// padding-bottom: constant(safe-area-inset-bottom);
	// padding-bottom: env(safe-area-inset-bottom);
	padding: 0 22rpx;
	box-sizing: border-box;
	.orderinfo{
		width: 100%;
		margin-top: 22rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 22rpx 24rpx 0;
		box-sizing: border-box;
		.info{
			display: flex;
			padding-bottom: 30rpx;
			image{
				width: 180rpx;
				height: 180rpx;
			}
			.text{
				width: calc(100% - 180rpx);
				padding-left: 24rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name{
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					line-height: 48rpx;
					padding-top: 12rpx;
				}
				.price{
					display: flex;
					align-items: flex-start;
					.num{
						font-weight: 900;
						font-size: 42rpx;
						color: #FF2E2E;
						line-height: 58rpx;
						padding-bottom: 12rpx;
						text{
							font-size: 34rpx;
						}
					}
					&>text{
						text-decoration: line-through;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 58rpx;
						margin-left: 14rpx;
					}
				}
			}
		}
		
	}
	.box-1{
		.r-text{
			justify-content: flex-end;
			switch{
				transform: scale(0.7) translateX(30%);
			}
		}
	}
	.box-2{
		.user-item{
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #F5F5F5;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			.u-info{
				padding-left: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.name{
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					line-height: 48rpx;
				}
				.number{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-top: 4rpx;
				}
			}
		}
		.add{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
			text{
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
	
	.box-4{
		padding-top: 0;
		.form-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-top: 1rpx solid #F5F5F5;
			&>text{
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				line-height: 48rpx;
			}
			.r-text{
				display: flex;
				align-items: center;
				text{
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}
				image{
					width: 24rpx;
					height: 24rpx;
				}
				
				input{
					text-align: right;
					
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					line-height: 48rpx;
				}
				&.num{
					image{
						width: 44.8rpx;
						height: 44.8rpx;
					}
					input{
						width: 70rpx;
						height: 44.8rpx;
						padding: 0 4rpx;
						box-sizing: border-box;
						text-align: center;
					}
				}
			}
		}
	}
	
	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		padding: 16rpx 22rpx 0;
		box-sizing: border-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		background-color: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
	
		.btn-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.left {
				display: flex;
				align-items: flex-end;
				text{
					font-weight: 400;
					font-size: 24rpx;
					color: #E72A2A;
					line-height: 34rpx;
				}
				view{
					display: flex;
					align-items: flex-end;
					font-weight: bold;
					font-size: 48rpx;
					color: #E72A2A;
					line-height: 48rpx;
					text{
						font-size: 28rpx;
					}
				}
			}
	
			.btn {
				display: flex;
				justify-content: flex-end;
	
				button {
					width: 276rpx;
					height: 96rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 96rpx;
					border-radius: 80rpx;
					background: linear-gradient(131deg, #FFA233 0%, #FB4C4C 100%);
				}
			}
		}
	}
}


	.coupon-popup{
		padding: 40rpx 0 0;
		background-color: #FFFFFF;
		.title{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			text{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}
			image{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 30rpx;
				top: 0;
			}
		}
		.tab{
			display: flex;
			align-items: center;
			padding: 46rpx 62rpx 56rpx;
			justify-content: space-between;
			box-sizing: border-box;
			background-color: #ffffff;
			.item{
				text{
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
					line-height: 44rpx;
					position: relative;
				}
				&.select{
					text{
						font-weight: bold;
						color: #E72A2A;
					}
					text::before{
						position: absolute;
						content: '';
						width: 72rpx;
						height: 8rpx;
						background: #E72A2A;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						top: calc(100% + 4rpx);
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
		.coupon-box{
			padding: 0rpx 30rpx 38rpx;
			max-height: 680rpx;
			overflow-y: auto;
			.item{
				width: 100%;
				height: 186rpx;
				position: relative;
				&:not(:last-child){
					margin-bottom: 30rpx;
				}
				&>image.bg{
					width: 100%;
					height: 100%;
				}
				.c_num{
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: center;
					.price{
						font-weight: bold;
						font-size: 48rpx;
						color: #FD845C;
						line-height: 66rpx;
						text{
							font-size: 30rpx;
						}
					}
					&>text{
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 8rpx;
					}
				}
				.c_info{
					position: absolute;
					left: 204rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					.xz{
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						line-height: 32rpx;
					}
					.c_box{
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 6rpx;
					}
					.time{
						font-weight: 400;
						font-size: 20rpx;
						color: #E72A2A;
						line-height: 28rpx;
						margin-top: 18rpx;
						display: flex;
						align-items: center;
						image{
							width: 16.37rpx;
							height: 12rpx;
							margin-left: 15rpx;
						}
					}
				}
				.checkImg{
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 48rpx;
					height: 48rpx;
				}
				
				.not_use{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0,0.4);
					display: flex;
					justify-content: flex-end;
					align-items: center;
					border-radius: 30rpx;
					button{
						width: 138rpx;
						height: 48rpx;
						background: #999999;
						border-radius: 48rpx;
						font-weight: bold;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 48rpx;
						margin-right: 26rpx;
					}
				}
			}
		}
		
		.btn{
			padding: 20rpx 30rpx;
			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
			// background: #FFFFFF;
			.b-box{
				width: 100%;
				height: 96rpx;
			}
			button{
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 90deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
	.pay-box{
		.top{
			padding: 48rpx 22rpx 0;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.price{
			padding: 85rpx 0 0;
			.num{
				text-align: center;
				font-weight: 900;
				font-size: 68rpx;
				color: #FF2E2E;
				line-height: 68rpx;
				text{
					font-weight: 400;
					font-size: 30rpx;
				}
			}
		}
		.pay-type{
			padding: 83rpx 22rpx 0;
			.item{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				&:not(:first-child){
					margin-top: 58rpx;
				}
				.left{
					display: flex;
					align-items: flex-start;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					.name{
						display: flex;
						flex-direction: column;
						text{
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							line-height: 48rpx;
							margin-left: 16rpx;
							&:nth-child(2){
								font-weight: bold;
								font-size: 26rpx;
								color: #000000;
								line-height: 36rpx;
								margin-top: 6rpx;
							}
						}
					}
				}
				.right{
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.btn{
			padding: 92rpx 30rpx 20rpx;
			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
			// background: #FFFFFF;
			.b-box{
				width: 100%;
				height: 96rpx;
			}
			button{
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 90deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
	
.copy-box{
	padding: 40rpx 22rpx 0;
	box-sizing: border-box;
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.t-icon{
			width: 48rpx;
			height: 48rpx;
		}
		text{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			margin-left: 14rpx;
		}
		.close{
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}
	.con{
		padding: 76rpx 0 0;
		.url-box{
			width: 100%;
			height: 88rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #EFEFEF;
			padding: 22rpx 20rpx;
			box-sizing: border-box;
		}
	}
	
	.btn{
		padding: 60rpx 0 0;
		// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
		// background: #FFFFFF;
		.b-box{
			width: 100%;
			height: 96rpx;
		}
		button{
			width: 100%;
			height: 96rpx;
			background: linear-gradient( 90deg, #FFA233 0%, #FB4C4C 100%);
			border-radius: 80rpx 80rpx 80rpx 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 14rpx;
			}
		}
	}
}
</style>
